<template>
    <div class="two-big">
        <input @blur="blur" v-model="text" type="text" placeholder="请输入你的心愿">
        <div class="color-big">
            <yuan @click="tab(index)" v-for="item, index in arr" :obj="item" :index="index" />
        </div>
        <input class="add1" @click="add" type="button" value="再想想" disabled />
        <div class="btm-big">

        </div>
    </div>
</template>
<script setup>
import { defineAsyncComponent, ref, watch, reactive } from 'vue';
const yuan = defineAsyncComponent(() => import('./yuan.vue'))
let text = ref('')
let color = ref('red')
let arr = ref(
    [
        {
            color: "red",
            is: true,
        },
        {
            color: "yellow",
            is: false,
        },
        {
            color: "blue",
            is: false,
        },
        {
            color: "aqua",
            is: false,
        },
        {
            color: "chartreuse",
            is: false,
        }
    ]
)
function blur() {
    if (text.value.trim() !== '') {
        document.querySelector('.add1').disabled = false
        document.querySelector('.add1').value = '添加'
       
    } else {
        document.querySelector('.add1').disabled = true 
        document.querySelector('.add1').value = '再想想'
    }
}
function add() {
    let big = document.querySelector('.btm-big')
    let top = Math.floor(Math.random() * (big.offsetWidth - 100 - 0 + 1)) + 0;
    let left = Math.floor(Math.random() * (big.offsetHeight - 100 - 0 + 1)) + 0;
    let div = document.createElement('div')
    let span = document.createElement('span')
    span.innerHTML = '×'
    div.style = `top:${top}px; left:${left}px;`
    div.className = 'add'
    div.innerHTML = `
        <div style="background-color: ${color.value};">
            ${text.value}
        </div>
    `
    big.append(div)
    div.append(span)
    span.onclick = function (e) {
        e.target.parentElement.remove()
    }
    div.onmousedown = (e) => {
        let pageleft = big.offsetLeft
        let pagetop = big.offsetTop
        div.classList.add('zd')
        window.onmousemove = function (e) {
            let x = e.pageX - pageleft - 50
            let y = e.pageY - pagetop - 50
            if (x <= 0) {
                x = 0
            }
            if (y <= 0) {
                y = 0
            }
            if (x + 50 >= big.offsetWidth - 50) {
                x = big.offsetWidth - 100
            }
            if (y + 50 >= big.offsetHeight - 50) {
                y = big.offsetHeight - 100
            }
            div.style = `top:${y}px; left:${x}px;`
        }
    }
    div.onmouseup = (e) => {
        window.onmousemove = null
        div.classList.remove('zd')
    }
}
function tab(index) {
    arr.value.forEach(item => {
        item.is = false
    })
    arr.value[index].is = true
    color.value = arr.value[index].color
}

</script>
<style>
.zd {
    z-index: 3;
}

.two-big {
    width: 100%;
    height: 100%;
}

.add {
    position: absolute;
    height: 100px;
    width: 100px;

    span {
        position: absolute;
        right: 5px;
        top: 5px;
        color: #fff;
        cursor: pointer;
        font-size: 26px;
    }

    div {
        width: 100%;
        height: 100%;
        position: absolute;
    }
}

.btm-big {
    width: 100%;
    height: 594px;
    border-top: 1px solid #000;
    position: relative;

}

.color-big {
    display: flex;
    justify-content: space-evenly;
    margin-top: 30px;
    position: relative;


}
</style>